<template>
  <div class="page-container">
    <div
      class="page-item"
      @click="prePage"
      :class="{ 'page-disable': currentPage === 1 }"
    >
      <xyIcon type="left" :size="16"></xyIcon>
    </div>
    <div
      :class="{ 'page-active': 1 == currentPage }"
      @click="changePage(1)"
      class="page-item"
    >
      1
    </div>
    <div class="page-item" v-show="showLeftMore" @click="goLeftMore">
      <xyIcon type="more" :size="16"></xyIcon>
    </div>
    <div
      :class="{ 'page-active': page == currentPage }"
      @click="changePage(page)"
      class="page-item"
      v-for="page in midPageList"
      :key="page"
    >
      {{ page }}
    </div>
    <div class="page-item" v-show="showRightMore" @click="goRightMore">
      <xyIcon type="more" :size="16"></xyIcon>
    </div>
    <div
      :class="{ 'page-active': totalPage == currentPage }"
      @click="changePage(totalPage)"
      class="page-item"
      v-if="totalPage !== 1"
    >
      {{ totalPage }}
    </div>
    <div
      class="page-item"
      @click="nextPage"
      :class="{ 'page-disable': currentPage === totalPage }"
    >
      <xyIcon type="right" :size="16"></xyIcon>
    </div>
  </div>
</template>

<script>
import xyIcon from './xyIcon.vue'

export default {
  components: {
    xyIcon,
  },
  props: {
    total: {
      type: Number,
      default: 0,
    },
    size: {
      type: Number,
      default: 10,
    },
    current: {
      type: Number,
      default: 1,
    },
    pagerCount: {
      type: Number,
      default: 7,
      validator(value) {
        return value > 5 && value % 2 === 1
      },
    },
  },
  data() {
    return {
      currentPage: this.current,
    }
  },
  computed: {
    showLeftMore() {
      if (
        this.totalPage > this.pagerCount &&
        this.currentPage - Math.ceil(this.pagerCount / 2) + 1 > 1
      ) {
        return true
      }
      return false
    },
    showRightMore() {
      if (
        this.totalPage > this.pagerCount &&
        this.currentPage + Math.ceil(this.pagerCount / 2) <= this.totalPage
      ) {
        return true
      }
      return false
    },
    midPageList() {
      let result = []
      if (this.totalPage <= this.pagerCount) {
        for (let i = 2; i < this.totalPage; i++) result.push(i)
      } else {
        let min = this.currentPage - Math.ceil(this.pagerCount / 2)
        let max = this.currentPage + Math.ceil(this.pagerCount / 2)
        if (min < 1) {
          for (let i = 2; i < this.pagerCount; i++) {
            result.push(i)
          }
        } else if (max > this.totalPage) {
          for (
            let i = this.totalPage - 1;
            i > this.totalPage - this.pagerCount;
            i--
          ) {
            result.unshift(i)
          }
        } else {
          for (let i = min + 2; i <= max - 2; i++) {
            result.push(i)
          }
        }
      }
      return result
    },
    totalPage() {
      let value = Math.ceil(this.total / this.size)
      return value > 0 ? value : 1
    },
  },
  methods: {
    goLeftMore() {
      this.currentPage = this.midPageList[0]
    },
    goRightMore() {
      this.currentPage = this.midPageList[this.midPageList.length - 1]
    },
    changePage(value) {
      if (value !== this.currentPage) {
        this.currentPage = value
        this.emitPage()
      }
    },
    prePage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.emitPage()
      }
    },
    nextPage() {
      if (this.currentPage !== this.totalPage) {
        this.currentPage++
        this.emitPage()
      }
    },
    emitPage() {
      this.$emit('changePage', this.currentPage)
    },
  },
  watch: {
    current(newVal) {
      if (newVal !== this.currentPage) {
        this.currentPage = newVal
      }
    },
  },
}
</script>

<style scoped>
.page-container {
  display: flex;
}
.page-item {
  height: 24px;
  min-width: 32px;
  line-height: 24px;
  padding: 0 8px;
  margin: 0 2px;
  color: #666666;
  cursor: pointer;
  border-radius: 2px;
}
.page-item:hover {
  background-color: rgba(200, 200, 200, 0.5);
}
.page-disable {
  color: #999999;
  background-color: rgba(200, 200, 200, 0.3);
}
.page-active {
  font-weight: 700;
  color: #409eff;
}
</style>
